<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center wtzg_flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub wtzg_fd0_0_higd'>
					<view class='flex flex-wrap align-center wtzg_fd0_0_c0_higd' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  wtzg_fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='wtzg_fd0_0_c1_c0_higd'>{{$t('问题整改')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end wtzg_fd0_0_c0_higd'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<benben-popup v-model="popupShow1748333214590" :mask="true" :mask-close-able="false" mode='center'>
				<!---flex布局flex布局开始-->
				<view class="flex flex-direction flex-wrap align-start benben-flex-layout wtzg_flex_1_higd">
					<view class='flex flex-direction flex-wrap align-stretch wtzg_fd1_0_higd'>
						<view class='flex flex-wrap align-center justify-center wtzg_fd1_0_c0_higd'>
							<image class='wtzg_fd1_0_c0_c0_higd' mode="aspectFit" :src='STATIC_URL+"138.png"'></image>
						</view>
						<view class='flex flex-wrap align-center justify-center wtzg_fd1_0_c1_higd'>
							<text class='wtzg_fd1_0_c1_c0_higd'>{{$t('提交成功')}}</text>
						</view>
						<view class='flex flex-wrap align-center justify-around wtzg_fd1_0_c2_higd'>
							<button class='wtzg_fd1_0_c2_c0_higd' @tap.stop="backFunc()">{{$t('返回')}}</button>
							<!-- <button class='wtzg_fd1_0_c2_c1_higd'   >{{$t('下一项')}}</button>
 -->
						</view>
					</view>
					<!-- <image class='wtzg_fd1_1_higd'  mode="aspectFit"  :src='STATIC_URL+"78.png"' @tap.stop="popupShow1748333214590=false" ></image>
 -->
				</view>

				<!---flex布局flex布局结束-->

			</benben-popup>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout wtzg_flex_2_higd">
				<view class='flex flex-direction align-stretch wtzg_fd2_0_higd'>
					<view class='flex flex-direction align-stretch wtzg_fd2_0_c0_higd'>
						<text style="line-height: 66rpx;">{{$t('整改图片')}}</text>
						<view class='flex flex-direction align-start wtzg_fd2_0_c0_c1_higd'>
							<benben-images-upload ref="benbenImagesUploadfd2_0_c0_c1_c0" :img-list.sync="file"
								:img-ids.sync="fileid" :maxlength="9" v-if="video==''">
								<template #content="{ num, maxlength, isShow}">
									<view class='flex flex-wrap align-start flex wtzg_fd2_0_c0_c1_c0_higd'>

										<view v-for="(image, index) in file" :key="index"
											class='flex position-relative wtzg_fd2_0_c0_c1_c00_higd'>
											<benben-clean-icon
												class='fu-iconfont2 position-absolute wtzg_fd2_0_c0_c1_c000_higd'
												hand-name="benben-images-upload" hand-method="delImage"
												:hand-index="index">&#xE8E7;</benben-clean-icon>
											<benben-image-item class='wtzg_fd2_0_c0_c1_c001_higd' mode="aspectFill"
												hand-name="benben-images-upload" hand-method="previewImage"
												:hand-index="index" :src='image'></benben-image-item>
										</view>


										<benben-image-item class='wtzg_fd2_0_c0_c1_c01_higd' mode="aspectFill"
											hand-name="benben-images-upload" hand-method="manyChooseImage" v-if="isShow"
											:src='STATIC_URL+"76.jpg"'></benben-image-item>

									</view>
								</template>
							</benben-images-upload>
							<!--  #ifdef H5-->
							<benben-video-upload-paas ref="upload1749032943077" :upload-data.sync="video"
								:video-info.sync="videos" isShowClean='true' v-if=" file.length==0">
								<template v-slot="{src, poster}">
									<view class='flex position-relative wtzg_fd2_0_c0_c1_c1_higd'>
										<image v-if="uptype == 0" class='wtzg_fd2_0_c0_c1_c1_c0_higd' mode="aspectFill"
											:src='poster?poster:STATIC_URL+"243.png"'></image>
										<image v-if="!src && uptype == 2" class='wtzg_fd2_0_c0_c1_c1_c0_higd' mode="aspectFill"
											:src='STATIC_URL+"243.png"'></image>
											<video  style="width: 650rpx;height: 180px;border-radius:16rpx ;" v-if="src&& uptype == 2" :src="src"></video>	
										
										<benben-clean-icon
											class='fu-iconfont2 position-absolute wtzg_fd2_0_c0_c1_c000_higd' v-if="src"
											hand-name="benben-video-upload-paas" hand-method="delVideo">&#xE8E7;
										</benben-clean-icon>

									</view>
								</template>
							</benben-video-upload-paas>
								<!-- #endif-->
								<!--  #ifdef H5-->
						<!-- 	<view class="video-upload-box" @click="chooseVideo" v-if=" file.length==0">
							 <image class='wtzg_fd2_0_c0_c1_c1_c0_higd' mode="aspectFill"
							 	:src='poster?poster:STATIC_URL+"243.png"'></image>
							</view> -->
									<!-- #endif-->
							<view class='flex flex-wrap align-center'>
								<text class='wtzg_fd2_0_c0_c1_c2_c0_higd'>{{$t('请上传照片或视频')}}</text>
							</view>
						</view>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='wtzg_fd2_0_c1_c0_higd'>{{$t('备注')}}</text>
					</view>
					<view class='flex flex-wrap wtzg_fd2_0_c2_higd'>
						<benben-textarea class='flex wtzg_input_fd2_0_c2_higd' confirm-type="done"
							:placeholder="$t('问题描述的越详细，有助于我们更快的解决问题')" :adjust-position='true' :maxlength="240"
							placeholder-style="color:#999;font-size:28rpx" v-model="zgyj" />

					</view>
				</view>
				<view class='flex flex-wrap align-center justify-center wtzg_fd2_1_higd' @tap.stop="tjFunc()">
					<button class='wtzg_fd2_1_c0_higd'>{{$t('提交')}}</button>
				</view>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import { SERVER_TYPE } from '@/common/config.js'

	export default {
		components: {},


		data() {
			return {
				"popupShow1748333214590": false,
				"video": "",
				"videos": {},
				"file": [],
				/** zgyj【意见】 **/ "zgyj": "",
				"fileid": "",
				"id": "",
				"title": "",
				poster:'',
				uptype:0,// 服务端类型 0:赛诸葛（现在oss)  1  mock  2:其他（本地上传)
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				id,
				title
			} = options
			if (id !== undefined) this.id = id
			if (title !== undefined) this.title = title
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.uptype=SERVER_TYPE
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			chooseVideo() {
			  const input = document.createElement("input");
			  input.type = "file";
			  input.accept = "video/*";
			  input.onchange = (e) => {
			    const file = e.target.files[0];
			    if (file) {
			      this.uploadVideo(file);
			    }
			  };
			  input.click();
			},
			uploadVideo(file) {
				console.log(file)
			  // this.uploadProgress = 10; // 模拟进度
			  setTimeout(() => {
			    this.videoUrl = URL.createObjectURL(file);
			    this.uploadProgress = 0;
			  }, 1000);
			},
			//提交整改
			async getyb73d5f20abf4cFunc() {
				//请求方法
				//数据验证

				let data673d5f20abf4c = await this.$api.post(global.apiUrls.post673d5f20abf4c, {
					aid: this.id,
					zgyj: this.zgyj,
					zgtp: this.file,
					video: this.video
				});

				if (data673d5f20abf4c.data.code != 1) {
					this.$message.info(data673d5f20abf4c.data.msg);
					return
				}
				let info673d5f20abf4c = data673d5f20abf4c.data;


			},
			//提交
			async tjFunc() {
				console.log(this.video)
				let obj = {
					video: this.video,
					zgjy: this.zgjy,
					aid: this.id,
					zgtp: this.file,
				}
				console.log(obj)
				
				if(this.file.length == 0 && !this.video){
					this.$message.info('请上传图片或视频')
					return
				}
				let data673d5f20abf4c = await this.$api.post(global.apiUrls.post673d5f20abf4c, {
					aid: this.id,
					zgyj: this.zgyj,
					zgtp: this.file,
					video: this.video
				});

				if (data673d5f20abf4c.data.code != 1) {
					this.$message.info(data673d5f20abf4c.data.msg);
					return
				}
				let info673d5f20abf4c = data673d5f20abf4c.data;
				if (info673d5f20abf4c.code == 1) {
					this.popupShow1748333214590 = true;
				} else {
					uni.showToast({
						title: info673d5f20abf4c.msg,
						mask: true,
						icon: 'none',
						duration: 1500
					});
				}

			},
			//返回
			backFunc() {
				uni.$emit('tjzg', this.zgyj)
				this.popupShow1748333214590 = false;
				this.$urouter.navigateBack(2);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;

		.wtzg_flex_2_higd {
			margin: 16rpx 0rpx 0rpx 0rpx;

			.wtzg_fd2_0_higd {
				padding: 24rpx;
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				border-radius: 16rpx;
				margin: 0rpx 0rpx 32rpx 0rpx;

				.wtzg_fd2_0_c0_higd {
					

					.wtzg_fd2_0_c0_c1_higd {
						margin: 0rpx 0rpx 24rpx 0rpx;

						.wtzg_fd2_0_c0_c1_c0_higd {
							width: 100%;
							padding: 24rpx 0rpx 0rpx 24rpx;

							.wtzg_fd2_0_c0_c1_c00_higd {
								margin: 0rpx 24rpx 24rpx 0rpx;

								.wtzg_fd2_0_c0_c1_c001_higd {
									width: 160rpx;
									height: 160rpx;
									border-radius: 16rpx;
								}
							}

							.wtzg_fd2_0_c0_c1_c01_higd {
								width: 160rpx;
								height: 160rpx;
								margin: 0rpx 24rpx 24rpx 0rpx;
								border-radius: 16rpx;
							}
						}

						.wtzg_fd2_0_c0_c1_c1_higd {
							margin: 0rpx 0rpx 0rpx 24rpx;

							.wtzg_fd2_0_c0_c1_c1_c0_higd {
								width: 160rpx;
								height: 160rpx;
								border-radius: 16rpx;
							}
						}

						.wtzg_fd2_0_c0_c1_c2_c0_higd {
							line-height: 33rpx;
							font-size: 24rpx;
							color: rgba(153, 153, 153, 1);
							margin: 32rpx;
						}
					}
				}

				.wtzg_fd2_0_c1_c0_higd {
					color: #333;
					font-size: 32rpx;
					margin: 0rpx 0rpx 24rpx 0rpx;
				}

				.wtzg_fd2_0_c2_higd {
					width: 100%;
					border-radius: 16rpx;
					background: rgba(247, 247, 247, 1);
					padding: 10rpx 10rpx 0rpx 16rpx;
					height: 220rpx;

					.wtzg_input_fd2_0_c2_higd {
						width: 100%;
						height: 140rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #333;
						white-space: pre-wrap;
					}
				}
			}

			.wtzg_fd2_1_higd {
				margin: 0rpx 0rpx 68rpx 0rpx;

				.wtzg_fd2_1_c0_higd {
					border-radius: 44rpx;
					width: 90%;
					line-height: 88rpx;
					font-size: 24rpx;
					background: rgba(252, 1, 1, 1);
					color: #fff;
					height: 88rpx;
				}
			}
		}

		.wtzg_fd2_0_c0_c1_c000_higd {
			top: 0rpx;
			right: 0rpx;
			z-index: 10;
			color: #ff5536;
		}

		.wtzg_flex_1_higd {
			width: 510rpx;

			.wtzg_fd1_0_higd {
				background: #fff;
				background-size: 100% auto !important;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 40rpx 0rpx 0rpx 0rpx;
				width: 510rpx;

				.wtzg_fd1_0_c0_higd {
					margin: 32rpx 176rpx 32rpx 176rpx;

					.wtzg_fd1_0_c0_c0_higd {
						width: 140rpx;
						height: 140rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}

				.wtzg_fd1_0_c1_higd {
					margin: 0rpx 0rpx 0rpx 0rpx;

					.wtzg_fd1_0_c1_c0_higd {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}
				}

				.wtzg_fd1_0_c2_higd {
					padding: 0rpx 0rpx 45rpx 0rpx;

					.wtzg_fd1_0_c2_c0_higd {
						border-radius: 33rpx 33rpx 33rpx 33rpx;
						width: 40%;
						line-height: 60rpx;
						font-size: 24rpx;
						background: rgba(255, 241, 240, 1);
						color: rgba(211, 42, 41, 1);
					}

					.wtzg_fd1_0_c2_c1_higd {
						border-radius: 33rpx 33rpx 33rpx 33rpx;
						width: 40%;
						line-height: 60rpx;
						font-size: 24rpx;
						background: rgba(211, 42, 41, 1);
						color: #fff;
					}
				}
			}

			.wtzg_fd1_1_higd {
				width: 60rpx;
				height: 60rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin: 48rpx 0rpx 0rpx 241rpx;
			}
		}

		.wtzg_flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.wtzg_fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.wtzg_fd0_0_c1_c0_higd {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.wtzg_fd0_0_c0_higd {
			width: 120rpx;

			.wtzg_fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}
	}
	.video-upload-box {
	 width: 160rpx;
	 height: 160rpx;
	 padding: 24rpx 0rpx 0rpx 24rpx;
	  // border: 2px dashed #ccc;
	  display: flex;
	  // flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  // margin: 20px auto;
	  position: relative;
	  overflow: hidden;
	}
	.wtzg_fd2_0_c0_c1_c1_c0_higd {
		width: 160rpx;
		height: 160rpx;
	}
	.video-preview {
	  width: 100%;
	  height: 100%;
	}
	.video-thumbnail {
	  width: 100%;
	  height: 100%;
	}
	.play-icon {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  color: white;
	  font-size: 40px;
	}
	.upload-hint {
	  margin-top: 10px;
	  color: #888;
	}
</style>
